<template>
    <div>
        <div class="header1">
            <div class="liang-img">
                <img class="liang-img11" src="http://course.myhope365.com/img/logo-header.08ec1297.png" alt="">
                <a-input-search placeholder="请输入课程" size="large" @search="onSearch">
                    <a-button slot="enterButton"
                              style="background: rgb(0, 207, 140) none repeat scroll 0% 0%; color: white; line-height: 100%;">
                        <a-icon type="search" />
                        搜索
                    </a-button>
                </a-input-search>
                <div class="login">
                    <a-badge :count="$store.getters.shopCarlength">
                        <a href="#" class="head-example"/>
                            <a-icon type="shopping-cart" @click="changUrlshopcar" style="font-size: 20px; margin-top: 2px;"/>
                    </a-badge>

                    <div class="login-to" v-if="$store.state.login">
                        <a-dropdown style="font-size: 14px; margin-right: 10px;">
                            <span>{{userInfo.nickname}} <img :src="userInfo.avatarUrl" alt="" style="height: 25px;width: 20px;"></span>

                            <a-menu slot="overlay" style="text-align: center;">
                                <a-menu-item @click="changeUrl11">
                                    个人中心
                                </a-menu-item>
                                <a-menu-item>
                                    <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"
                                    >我的课程</a
                                    >
                                </a-menu-item>
                                <a-menu-item>
                                    <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"
                                    >我的订单</a
                                    >
                                </a-menu-item>
                                <a-menu-item @click="quitLogin">
                                    退出登录
                                </a-menu-item>



                            </a-menu>
                        </a-dropdown>


                    </div>
                    <div class="login-to" @click="login1"  v-else>
                        <span>登录/注册</span>
                        <a-icon type="user"/>
                    </div>
                    <login></login>
                    <forget></forget>
                    <registered></registered>
                </div>
            </div>
            <div class="nav">
                <ul>
                    <li class="color" @click="changeUrl">首页</li>
                    <li>
                        <a-dropdown>
                            <span>课程分类 <a-icon type="down" /></span>
                            <a-menu slot="overlay">
                                <a-menu-item v-for="(item,index) in list" :key="index">
                                    <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"
                                    >{{item.title}}</a
                                    >
                                </a-menu-item>

                            </a-menu>
                        </a-dropdown>
                    </li>
                    <li>专属课程</li>
                </ul>
            </div>
        </div>

    </div>
</template>

<script>
    import forget from "./forget";
    import login from "./login";
    import registered from "./registered";
    import {mapState} from "vuex";
    import {getlist, getquitLogin} from "../api/api";


    export default {
        name: "header11",
        data(){
          return{
              list:[]
          }
        },
        methods: {
            onSearch(value) {
                console.log(value);
            },
            login1(){
                this.$store.commit("change",true)
            },
            changUrlshopcar(){
                this.$router.push("/index22/shopCar");
            },
            quitLogin(){
                getquitLogin().then(res=>{
                    if(res.code == 0){
                        this.$store.commit("changeLogin",false);
                        this.$store.commit("changeShopCar", []);
                        this.$message.info("已经安全退出");
                        this.$router.push("/");
                    }else {
                        this.$store.commit("changeLogin",true);
                        this.$store.$message.error("错误");
                    }
                })
            },
            changeUrl(){
                this.$router.push("")
            },
            changeUrl11(){
                this.$store.push("/index22/userInfo")
            }
        },
        created() {
            getlist().then(res=>{
                this.list = res.rows;
            })
        },
        components:{
            login,
            forget,
            registered
        },
        computed:{
            ...mapState(["userInfo"])

        }
    }
</script>

<style lang="less" scoped>
    div {
        background-color: white;

        .header1 {
            width: 1200px;
            margin: 0 auto;

            .liang-img {
                height: 106px;
                width: 1200px;

                .liang-img11 {
                    margin: 22px 200px 0px 0px;
                }

                /deep/ .ant-input-group-wrapper {
                    height: 30px;
                    width: 400px;
                    margin: 30px 6px 0 0;

                }

                /deep/ .ant-input-lg {
                    height: 35px;
                    border-top-left-radius: 20px;
                    border-bottom-left-radius: 20px;
                }

                /deep/ .ant-input-search-button {
                    /*border-radius: 20px;*/
                    height: 35px;
                    border-top-right-radius: 20px;
                    border-bottom-right-radius: 20px;
                }
            }

            .login {
                height: 100%;
                float: right;
                margin-right: 100px;
                font-size: 16px;
                padding: 37px 0 0;

                i {
                    font-size: 16px;

                }

                .login-to {
                    font-size: 16px;
                    /*margin-top: 3px;*/
                    margin-left: 10px;
                    float: right;
                    border-left: 1px solid #999999;
                    padding-left: 5px;

                    i {
                        margin-left: 10px;
                    }
                }
            }


        }

        .nav {
            margin-top: 10px;

            ul {
                padding: 0;
                margin: 0;
                height: 30px;
                list-style: none;

                .color {
                    color: #42b983;
                }

                li {
                    padding: 0;
                    margin-right: 20px;
                    float: left;
                    font-size: 16px;
                }
            }
        }
    }
/deep/ .ant-badge-count{
    padding: 0;
    font-size: 10px;
    /*display: inline-block;*/
    min-width: 15px;
    height: 15px;
}
    /deep/.ant-scroll-number-only{
        height: 15px;
        line-height: 15px;
    }
    /deep/ .ant-scroll-number-only > p.ant-scroll-number-only-unit{
        height: 15px;
        line-height: 15px;
    }
</style>